import * as echarts from "echarts";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    var chartDom = document.getElementById("chart");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      xAxis: {
        type: "category",
        data: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [
            39, 39, 42, 44, 58, 64, 49, 44, 66, 50, 68, 61, 41, 40, 56, 46, 38,
            41, 45, 69,
          ],
          type: "bar",
          label: {
            //柱体上显示数值
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              fontSize: "7px",
              color: "#666",
            },
            formatter: "{c}",
          },
        },
      ],
    };
    option && myChart.setOption(option);
  }, []);

  return (
    <>
      <div style={{ marginLeft: "20px" }}>
        <div>填写人数:768</div>
        <div>填写结果:997</div>
      </div>
      <div id="chart" style={{ width: "400px", height: "400px" }}></div>
    </>
  );
}

export default App;
